<template>
  <view class="flex_c main">
    <nav-bar :showBack="false" title="消息" />
    <view class="flex_r msg_tab">
      <view :class="['flex1 flex_center msg_tab_item', form.query.msgFlag === 2 && 'active']" @click="onTabChange(2)">
        <image mode="aspectFill" src="https://zsjl.oss-cn-beijing.aliyuncs.com/test/xcx/msg_interact.png" />
        <view>互动消息</view>
      </view>
      <view :class="['flex1 flex_center msg_tab_item', form.query.msgFlag === 1 && 'active']" @click="onTabChange(1)">
        <image mode="aspectFill" src="https://zsjl.oss-cn-beijing.aliyuncs.com/test/xcx/msg_system.png" />
        <view>系统消息</view>
      </view>
    </view>
    <view class="flex1" style="overflow: hidden">
      <scroll-view class="msg_cont" scroll-y="true" lower-threshold="100" @scrolltolower="onLoad" refresher-enabled
        :refresher-triggered="triggered" @refresherrefresh="onRefresh">
        <view v-for="item in list" :key="item.id" class="cont_item flex_r">
          <image v-if="item.headOssUrl" mode="aspectFill" :src="item.headOssUrl" fit="cover"></image>
          <image v-else mode="aspectFill" src="https://zsjl.oss-cn-beijing.aliyuncs.com/test/xcx/logo1.png" fit="cover">
          </image>
          <view class="flex1">
            <view class="title">{{ item.userName }}</view>
            <view>{{ item.content }}</view>
            <view class="date_txt">{{ item.createTime }}</view>
          </view>
        </view>
        <van-empty v-if="total === 0" class="pt-60" image="https://zsjl.oss-cn-beijing.aliyuncs.com/test/xcx/empty.png"
          description="暂无消息" />
        <view v-if="total && total === list.length" class="all_tip">到底了</view>
      </scroll-view>
    </view>
  </view>
  <van-dialog id="van-dialog" cancel-button-color="#999999" confirm-button-color="#00B277" />

</template>
<script setup>
import { getMsgList } from "@/api/center"
import { onBeforeMount, ref, reactive, toRefs } from "vue"
import { onShow } from '@dcloudio/uni-app'
import storage from '@/utils/storage'
import { useStore } from "vuex";
import Dialog from '/wxcomponents/vant/dialog/dialog';

let store = useStore()
let data = reactive({  })
let form = reactive({
  query: {
    pageCode: 1,
    pageSize: 10,
    msgFlag: 2,
  },
  list: [],
  total: ''
})
let triggered = ref(false)

const fnGet = async () => {
  const { code, data } = await getMsgList(form.query)
  if (code === 200) {
    form.list = form.list.concat(data.rows)
    form.total = data.total
    triggered.value = false
  }
}
onShow(() => {
  let isLogin = storage.getStorage('regiterFlag') === 0 ? true : false
  if (!isLogin) {
    console.log(Dialog, 'DialogDialogDialogDialog')
    Dialog.confirm({
      title: '温馨提示',
      cancelButtonText: '再看看',
      closeOnClickOverlay: true,
      showCancelButton: true,
      cancelButtonColor: '#999',
      confirmButtonColor: '#00B277',
      confirmButtonText: '立即登录',
      message: '您还未登陆，请登录查看 ',
    })
    .then((e) => {
      store.commit('setLoginStatus', true)	
    }).catch(e => {
      store.commit('setTabIndex', 0)
      // 拦截取消操作
      uni.switchTab({
        url: '/pages/home/index'
      })
    });
  } else {
    form.list = []
    form.query.pageCode = 1
    fnGet()
  }

 
})
let onTabChange = msgFlag => {
  form.list = []
  form.query.msgFlag = msgFlag
  form.query.pageCode = 1
  form.query.pageSize = 10
  fnGet()
}

let onLoad = e => {
  console.log(form.total, form.list.length, '到底了吧')
  if (form.total > form.list.length) {
    ++form.query.pageCode
    fnGet()
  }
}
let onRefresh = () => {
  form.query.pageCode = 1
  form.list = []
  triggered.value = true
  fnGet()
}
const { list, total } = toRefs(form)


</script>
<style lang="scss" scoped>
.main {
  height: calc(100vh - constant(safe-area-inset-bottom) - 100rpx);
  height: calc(100vh - env(safe-area-inset-bottom) - 100rpx);
}

.msg_tab {
  height: 274rpx;
  background: #fff;
  font-size: 28rpx;
  font-weight: 500;
  color: #000;
  line-height: 54rpx;
  border-bottom: 15rpx solid #F4F7FC;

  &_item {
    flex-direction: column;

    &.active {
      color: #00B277;
    }

    image {
      width: 118rpx;
      height: 118rpx;
      margin-bottom: 17rpx;
      display: block;
    }
  }
}

.msg_cont {
  background: #fff;
  padding: 28rpx 20rpx 0;
  height: 100%;

  .cont_item {
    padding: 34rpx 30rpx;
    font-weight: 500;
    color: #666666;
    line-height: 40rpx;
    border-bottom: 2rpx solid #F4F7FC;

    image {
      width: 80rpx;
      height: 80rpx;
      border-radius: 100rpx;
      margin-right: 17rpx;
    }

    .title {
      font-size: 28rpx;
      font-weight: bold;
      color: #000;
      margin-bottom: 14rpx;
    }

    .date_txt {
      font-size: 20rpx;
      margin-top: 5rpx;
      color: #999;
    }
  }
}
</style>